<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动智 - 智能运动分析助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#722ED1',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
            .card-hover {
                @apply hover:shadow-lg hover:-translate-y-1 transition-all duration-300;
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-dark font-sans">
    <!-- 导航栏 -->
    <nav id="navbar" class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-bolt text-primary text-2xl"></i>
                <span class="text-xl font-bold text-primary">动智</span>
            </div>
            
            <div class="hidden md:flex items-center space-x-8">
                <a href="#analysis" class="font-medium hover:text-primary transition-custom">姿势分析</a>
                <a href="#plan" class="font-medium hover:text-primary transition-custom">训练计划</a>
                <a href="#knowledge" class="font-medium hover:text-primary transition-custom">运动知识</a>
                <a href="#about" class="font-medium hover:text-primary transition-custom">关于我们</a>
            </div>
            
            <button class="md:hidden text-dark text-xl" id="menuToggle">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobileMenu" class="hidden md:hidden bg-white border-t">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#analysis" class="py-2 font-medium hover:text-primary transition-custom">姿势分析</a>
                <a href="#plan" class="py-2 font-medium hover:text-primary transition-custom">训练计划</a>
                <a href="#knowledge" class="py-2 font-medium hover:text-primary transition-custom">运动知识</a>
                <a href="#about" class="py-2 font-medium hover:text-primary transition-custom">关于我们</a>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <header class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/5 to-secondary/5">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-shadow mb-4">
                        让AI成为你的<br>
                        <span class="text-primary">私人运动教练</span>
                    </h1>
                    <p class="text-lg text-gray-600 mb-8 max-w-lg">
                        动智利用先进的AI技术分析你的运动姿势，提供专业指导，制定个性化训练计划，助你科学健身，避免受伤。
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="#analysis" class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-lg transition-custom text-center">
                            开始分析 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                        <a href="#plan" class="bg-white border border-primary text-primary hover:bg-primary/5 font-medium py-3 px-8 rounded-lg transition-custom text-center">
                            生成训练计划
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <img src="https://picsum.photos/id/176/600/400" alt="人们在进行各种运动" class="rounded-xl shadow-lg w-full object-cover h-[300px] md:h-[400px]">
                </div>
            </div>
        </div>
    </header>

    <!-- 功能亮点 -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">为什么选择动智？</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">我们利用文心一言4.5的强大AI能力，为您提供专业、个性化的运动指导</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-light rounded-xl p-6 card-hover">
                    <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-5">
                        <i class="fa fa-video-camera text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">智能姿势分析</h3>
                    <p class="text-gray-600">上传运动图片或视频，AI将精准识别动作，分析姿势问题，提供专业改进建议。</p>
                </div>
                
                <div class="bg-light rounded-xl p-6 card-hover">
                    <div class="w-14 h-14 bg-secondary/10 rounded-lg flex items-center justify-center mb-5">
                        <i class="fa fa-calendar-check-o text-secondary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">个性化训练计划</h3>
                    <p class="text-gray-600">根据您的健身水平、目标和可用时间，生成专属训练计划，科学高效达成目标。</p>
                </div>
                
                <div class="bg-light rounded-xl p-6 card-hover">
                    <div class="w-14 h-14 bg-accent/10 rounded-lg flex items-center justify-center mb-5">
                        <i class="fa fa-book text-accent text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">专业运动知识</h3>
                    <p class="text-gray-600">解答您的运动疑问，提供科学的训练方法、营养建议和损伤预防知识。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 姿势分析区域 -->
    <section id="analysis" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">运动姿势分析</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">上传您的运动图片或视频，AI将分析姿势是否正确并提供改进建议</p>
            </div>
            
            <div class="bg-white rounded-2xl shadow-md overflow-hidden">
                <div class="grid grid-cols-1 lg:grid-cols-2">
                    <div class="p-6 md:p-8">
                        <form id="analysisForm">
                            <div class="mb-6">
                                <label for="exerciseType" class="block text-gray-700 font-medium mb-2">运动类型</label>
                                <select id="exerciseType" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom">
                                    <option value="深蹲">深蹲</option>
                                    <option value="硬拉">硬拉</option>
                                    <option value="卧推">卧推</option>
                                    <option value="俯卧撑">俯卧撑</option>
                                    <option value="引体向上">引体向上</option>
                                    <option value="平板支撑">平板支撑</option>
                                    <option value="跑步">跑步</option>
                                    <option value="瑜伽">瑜伽</option>
                                    <option value="其他">其他</option>
                                </select>
                            </div>
                            
                            <div class="mb-6">
                                <label class="block text-gray-700 font-medium mb-2">上传运动图片</label>
                                <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary transition-custom">
                                    <input type="file" id="imageUpload" accept="image/*" class="hidden">
                                    <label for="imageUpload" class="cursor-pointer">
                                        <i class="fa fa-upload text-gray-400 text-3xl mb-2"></i>
                                        <p class="text-gray-500">点击或拖拽图片到此处上传</p>
                                        <p class="text-gray-400 text-sm mt-1">支持 JPG、PNG 格式</p>
                                    </label>
                                    <div id="imagePreview" class="mt-4 hidden">
                                        <img id="previewImg" src="" alt="预览图" class="max-w-full max-h-48 mx-auto rounded">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-6">
                                <label class="block text-gray-700 font-medium mb-2">上传运动视频 (可选)</label>
                                <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary transition-custom">
                                    <input type="file" id="videoUpload" accept="video/*" class="hidden">
                                    <label for="videoUpload" class="cursor-pointer">
                                        <i class="fa fa-film text-gray-400 text-3xl mb-2"></i>
                                        <p class="text-gray-500">点击或拖拽视频到此处上传</p>
                                        <p class="text-gray-400 text-sm mt-1">支持 MP4、MOV 格式，建议时长不超过10秒</p>
                                    </label>
                                    <div id="videoPreview" class="mt-4 hidden">
                                        <video id="previewVideo" controls class="max-w-full max-h-48 mx-auto rounded"></video>
                                    </div>
                                </div>
                            </div>
                            
                            <button type="submit" id="analyzeBtn" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-custom flex items-center justify-center">
                                <i class="fa fa-analytics mr-2"></i> 分析姿势
                            </button>
                        </form>
                    </div>
                    
                    <div class="bg-light p-6 md:p-8 flex flex-col">
                        <div id="analysisLoading" class="hidden flex-1 flex flex-col items-center justify-center">
                            <div class="w-16 h-16 border-4 border-primary/30 border-t-primary rounded-full animate-spin mb-4"></div>
                            <p class="text-gray-600">正在分析您的运动姿势，请稍候...</p>
                        </div>
                        
                        <div id="analysisResult" class="hidden flex-1 overflow-auto">
                            <h3 class="text-xl font-bold mb-4 flex items-center">
                                <i class="fa fa-check-circle text-primary mr-2"></i> 姿势分析结果
                            </h3>
                            <div id="resultContent" class="prose max-w-none"></div>
                        </div>
                        
                        <div id="analysisInitial" class="flex-1 flex flex-col items-center justify-center text-center p-4">
                            <i class="fa fa-line-chart text-5xl text-gray-300 mb-4"></i>
                            <h3 class="text-xl font-medium text-gray-500 mb-2">等待分析</h3>
                            <p class="text-gray-400">上传运动图片或视频并点击分析按钮，即可获取专业的姿势评估</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 训练计划区域 -->
    <section id="plan" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">个性化训练计划</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">根据您的情况生成专属训练计划，科学高效地达成健身目标</p>
            </div>
            
            <div class="bg-white rounded-2xl shadow-md overflow-hidden border border-gray-100">
                <div class="grid grid-cols-1 lg:grid-cols-2">
                    <div class="p-6 md:p-8 border-b lg:border-b-0 lg:border-r border-gray-100">
                        <form id="planForm">
                            <div class="mb-6">
                                <label for="fitnessLevel" class="block text-gray-700 font-medium mb-2">健身水平</label>
                                <div class="flex flex-wrap gap-3">
                                    <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                        <input type="radio" name="fitnessLevel" value="初学者" checked class="mr-2 text-primary">
                                        <span>初学者</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                        <input type="radio" name="fitnessLevel" value="中级" class="mr-2 text-primary">
                                        <span>中级</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                        <input type="radio" name="fitnessLevel" value="高级" class="mr-2 text-primary">
                                        <span>高级</span>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="mb-6">
                                <label class="block text-gray-700 font-medium mb-2">健身目标 (可多选)</label>
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                    <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                        <input type="checkbox" name="goals" value="增肌" class="mr-2 text-primary">
                                        <span>增肌</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                        <input type="checkbox" name="goals" value="减脂" class="mr-2 text-primary" checked>
                                        <span>减脂</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                        <input type="checkbox" name="goals" value="提高耐力" class="mr-2 text-primary">
                                        <span>提高耐力</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                        <input type="checkbox" name="goals" value="增强灵活性" class="mr-2 text-primary">
                                        <span>增强灵活性</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                        <input type="checkbox" name="goals" value="改善体态" class="mr-2 text-primary">
                                        <span>改善体态</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                        <input type="checkbox" name="goals" value="提升运动表现" class="mr-2 text-primary">
                                        <span>提升运动表现</span>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
                                <div>
                                    <label for="availableDays" class="block text-gray-700 font-medium mb-2">每周可训练天数</label>
                                    <input type="range" id="availableDays" min="1" max="7" value="3" 
                                        class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                                    <div class="flex justify-between text-sm text-gray-500 mt-1">
                                        <span>1天</span>
                                        <span id="daysValue">3天</span>
                                        <span>7天</span>
                                    </div>
                                </div>
                                
                                <div>
                                    <label for="durationPerDay" class="block text-gray-700 font-medium mb-2">每次训练时长 (分钟)</label>
                                    <input type="range" id="durationPerDay" min="10" max="120" step="5" value="45" 
                                        class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                                    <div class="flex justify-between text-sm text-gray-500 mt-1">
                                        <span>10分钟</span>
                                        <span id="durationValue">45分钟</span>
                                        <span>120分钟</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-6">
                                <label for="equipment" class="block text-gray-700 font-medium mb-2">可用器材 (可选)</label>
                                <input type="text" id="equipment" placeholder="例如：哑铃、杠铃、跑步机等，无器材可留空"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom">
                            </div>
                            
                            <div class="mb-6">
                                <label for="injuries" class="block text-gray-700 font-medium mb-2">伤病或身体限制 (可选)</label>
                                <input type="text" id="injuries" placeholder="例如：膝盖不适、腰部旧伤等，无则留空"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom">
                            </div>
                            
                            <button type="submit" id="planBtn" class="w-full bg-secondary hover:bg-secondary/90 text-white font-medium py-3 px-6 rounded-lg transition-custom flex items-center justify-center">
                                <i class="fa fa-calendar mr-2"></i> 生成训练计划
                            </button>
                        </form>
                    </div>
                    
                    <div class="bg-light p-6 md:p-8 flex flex-col">
                        <div id="planLoading" class="hidden flex-1 flex flex-col items-center justify-center">
                            <div class="w-16 h-16 border-4 border-secondary/30 border-t-secondary rounded-full animate-spin mb-4"></div>
                            <p class="text-gray-600">正在生成您的个性化训练计划，请稍候...</p>
                        </div>
                        
                        <div id="planResult" class="hidden flex-1 overflow-auto">
                            <h3 class="text-xl font-bold mb-4 flex items-center">
                                <i class="fa fa-check-circle text-secondary mr-2"></i> 您的个性化训练计划
                            </h3>
                            <div id="planContent" class="prose max-w-none"></div>
                        </div>
                        
                        <div id="planInitial" class="flex-1 flex flex-col items-center justify-center text-center p-4">
                            <i class="fa fa-calendar-o text-5xl text-gray-300 mb-4"></i>
                            <h3 class="text-xl font-medium text-gray-500 mb-2">等待计划生成</h3>
                            <p class="text-gray-400">填写您的健身信息并点击生成按钮，即可获取专属训练计划</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 运动知识库 -->
    <section id="knowledge" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">运动知识库</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">获取专业运动知识，解答您的健身疑问</p>
            </div>
            
            <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-md overflow-hidden">
                <div class="p-6 md:p-8">
                    <form id="knowledgeForm" class="mb-8">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                            <div class="md:col-span-2">
                                <label for="knowledgeTopic" class="block text-gray-700 font-medium mb-2">知识主题</label>
                                <select id="knowledgeTopic" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent transition-custom">
                                    <option value="肌肉训练">肌肉训练</option>
                                    <option value="有氧运动">有氧运动</option>
                                    <option value="拉伸放松">拉伸放松</option>
                                    <option value="营养补充">营养补充</option>
                                    <option value="损伤预防">损伤预防</option>
                                    <option value="恢复技巧">恢复技巧</option>
                                    <option value="运动心理学">运动心理学</option>
                                    <option value="其他">其他</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <label for="knowledgeQuestion" class="block text-gray-700 font-medium mb-2">具体问题 (可选)</label>
                            <textarea id="knowledgeQuestion" rows="3" placeholder="请输入您想了解的具体问题，例如：如何有效瘦肚子？"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent transition-custom"></textarea>
                        </div>
                        
                        <button type="submit" id="knowledgeBtn" class="bg-accent hover:bg-accent/90 text-white font-medium py-3 px-8 rounded-lg transition-custom">
                            <i class="fa fa-search mr-2"></i> 获取知识解答
                        </button>
                    </form>
                    
                    <div id="knowledgeLoading" class="hidden flex flex-col items-center justify-center py-12">
                        <div class="w-16 h-16 border-4 border-accent/30 border-t-accent rounded-full animate-spin mb-4"></div>
                        <p class="text-gray-600">正在为您查找相关知识，请稍候...</p>
                    </div>
                    
                    <div id="knowledgeResult" class="hidden">
                        <h3 class="text-xl font-bold mb-4 flex items-center">
                            <i class="fa fa-book text-accent mr-2"></i> 知识解答
                        </h3>
                        <div id="knowledgeContent" class="prose max-w-none"></div>
                    </div>
                    
                    <div id="knowledgeInitial" class="py-12 text-center">
                        <i class="fa fa-question-circle text-5xl text-gray-300 mb-4"></i>
                        <h3 class="text-xl font-medium text-gray-500 mb-2">查找运动知识</h3>
                        <p class="text-gray-400">选择知识主题并输入您的问题，获取专业解答</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">关于动智</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">让每个人都能享受专业的运动指导</p>
            </div>
            
            <div class="max-w-3xl mx-auto text-center">
                <p class="text-gray-600 mb-6">
                    动智是一款基于AI技术的智能运动分析助手，我们致力于利用先进的人工智能技术，
                    为大众提供专业、个性化的运动指导。无论您是健身新手还是运动达人，
                    动智都能帮助您更科学地锻炼，避免运动损伤，高效达成健身目标。
                </p>
                <p class="text-gray-600 mb-8">
                    我们的AI模型基于文心一言4.5开发，能够精准分析运动姿势，提供专业建议，
                    并根据个人情况制定科学的训练计划。
                </p>
                <div class="inline-flex items-center px-6 py-3 border border-gray-300 rounded-lg">
                    <i class="fa fa-lightbulb-o text-primary text-2xl mr-3"></i>
                    <p class="text-gray-700">
                        提示：AI建议仅供参考，如有严重健康问题，请先咨询专业医师
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-bolt text-primary text-2xl"></i>
                        <span class="text-xl font-bold">动智</span>
                    </div>
                    <p class="text-gray-400 mb-4">
                        智能运动分析助手，让每个人都能享受专业的运动指导
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-medium mb-4">功能</h4>
                    <ul class="space-y-2">
                        <li><a href="#analysis" class="text-gray-400 hover:text-white transition-custom">姿势分析</a></li>
                        <li><a href="#plan" class="text-gray-400 hover:text-white transition-custom">训练计划</a></li>
                        <li><a href="#knowledge" class="text-gray-400 hover:text-white transition-custom">运动知识</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-medium mb-4">支持</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">使用帮助</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">常见问题</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-medium mb-4">法律</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">隐私政策</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">服务条款</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-500">
                <p>&copy; 2023 动智 - 智能运动分析助手 版权所有</p>
            </div>
        </div>
    </footer>

    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('py-2', 'shadow');
                navbar.classList.remove('py-3');
            } else {
                navbar.classList.add('py-3');
                navbar.classList.remove('py-2', 'shadow');
            }
        });
        
        // 移动端菜单切换
        document.getElementById('menuToggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobileMenu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动端菜单
                    document.getElementById('mobileMenu').classList.add('hidden');
                }
            });
        });
        
        // 训练计划滑块值显示
        const daysSlider = document.getElementById('availableDays');
        const daysValue = document.getElementById('daysValue');
        daysSlider.addEventListener('input', function() {
            daysValue.textContent = `${this.value}天`;
        });
        
        const durationSlider = document.getElementById('durationPerDay');
        const durationValue = document.getElementById('durationValue');
        durationSlider.addEventListener('input', function() {
            durationValue.textContent = `${this.value}分钟`;
        });
        
        // 图片上传预览
        const imageUpload = document.getElementById('imageUpload');
        const imagePreview = document.getElementById('imagePreview');
        const previewImg = document.getElementById('previewImg');
        
        imageUpload.addEventListener('change', function(e) {
            if (e.target.files && e.target.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImg.src = e.target.result;
                    imagePreview.classList.remove('hidden');
                }
                reader.readAsDataURL(e.target.files[0]);
            }
        });
        
        // 视频上传预览
        const videoUpload = document.getElementById('videoUpload');
        const videoPreview = document.getElementById('videoPreview');
        const previewVideo = document.getElementById('previewVideo');
        
        videoUpload.addEventListener('change', function(e) {
            if (e.target.files && e.target.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewVideo.src = e.target.result;
                    videoPreview.classList.remove('hidden');
                }
                reader.readAsDataURL(e.target.files[0]);
            }
        });
        
        // 姿势分析表单提交
        document.getElementById('analysisForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // 显示加载状态
            document.getElementById('analysisInitial').classList.add('hidden');
            document.getElementById('analysisResult').classList.add('hidden');
            document.getElementById('analysisLoading').classList.remove('hidden');
            
            // 获取表单数据
            const exerciseType = document.getElementById('exerciseType').value;
            let imageData = null;
            
            // 处理图片
            if (imageUpload.files && imageUpload.files[0]) {
                const reader = new FileReader();
                await new Promise((resolve) => {
                    reader.onload = function(e) {
                        // 提取base64数据（去掉前缀）
                        imageData = e.target.result.split(',')[1];
                        resolve();
                    };
                    reader.readAsDataURL(imageUpload.files[0]);
                });
            }
            
            try {
                // 发送请求
                const response = await fetch('/api/analyze', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        exercise_type: exerciseType,
                        image_data: imageData,
                        video_data: null // 简化处理，实际应用中可以处理视频
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    // 显示结果
                    document.getElementById('resultContent').innerHTML = result.result
                        .replace(/\n/g, '<br>')
                        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                        .replace(/\*(.*?)\*/g, '<em>$1</em>')
                        .replace(/### (.*?)\n/g, '<h4 class="font-bold mt-4 mb-2">$1</h4>')
                        .replace(/## (.*?)\n/g, '<h3 class="font-bold text-lg mt-6 mb-3">$1</h3>');
                    
                    document.getElementById('analysisLoading').classList.add('hidden');
                    document.getElementById('analysisResult').classList.remove('hidden');
                } else {
                    throw new Error(result.error || '分析失败');
                }
            } catch (error) {
                console.error('分析失败:', error);
                document.getElementById('analysisLoading').classList.add('hidden');
                document.getElementById('analysisInitial').classList.remove('hidden');
                alert(`分析失败: ${error.message}`);
            }
        });
        
        // 训练计划表单提交
        document.getElementById('planForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // 显示加载状态
            document.getElementById('planInitial').classList.add('hidden');
            document.getElementById('planResult').classList.add('hidden');
            document.getElementById('planLoading').classList.remove('hidden');
            
            // 获取表单数据
            const fitnessLevel = document.querySelector('input[name="fitnessLevel"]:checked').value;
            const goals = Array.from(document.querySelectorAll('input[name="goals"]:checked')).map(el => el.value);
            const availableDays = parseInt(document.getElementById('availableDays').value);
            const durationPerDay = parseInt(document.getElementById('durationPerDay').value);
            const equipment = document.getElementById('equipment').value;
            const injuries = document.getElementById('injuries').value;
            
            try {
                // 发送请求
                const response = await fetch('/api/plan', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        fitness_level: fitnessLevel,
                        goals: goals,
                        available_days: availableDays,
                        duration_per_day: durationPerDay,
                        equipment_available: equipment,
                        injuries_or_limitations: injuries
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    // 显示结果
                    document.getElementById('planContent').innerHTML = result.result
                        .replace(/\n/g, '<br>')
                        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                        .replace(/\*(.*?)\*/g, '<em>$1</em>')
                        .replace(/### (.*?)\n/g, '<h4 class="font-bold mt-4 mb-2">$1</h4>')
                        .replace(/## (.*?)\n/g, '<h3 class="font-bold text-lg mt-6 mb-3">$1</h3>');
                    
                    document.getElementById('planLoading').classList.add('hidden');
                    document.getElementById('planResult').classList.remove('hidden');
                } else {
                    throw new Error(result.error || '生成计划失败');
                }
            } catch (error) {
                console.error('生成计划失败:', error);
                document.getElementById('planLoading').classList.add('hidden');
                document.getElementById('planInitial').classList.remove('hidden');
                alert(`生成计划失败: ${error.message}`);
            }
        });
        
        // 运动知识表单提交
        document.getElementById('knowledgeForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // 显示加载状态
            document.getElementById('knowledgeInitial').classList.add('hidden');
            document.getElementById('knowledgeResult').classList.add('hidden');
            document.getElementById('knowledgeLoading').classList.remove('hidden');
            
            // 获取表单数据
            const topic = document.getElementById('knowledgeTopic').value;
            const question = document.getElementById('knowledgeQuestion').value;
            
            try {
                // 发送请求
                const response = await fetch('/api/knowledge', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        topic: topic,
                        question: question
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    // 显示结果
                    document.getElementById('knowledgeContent').innerHTML = result.result
                        .replace(/\n/g, '<br>')
                        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                        .replace(/\*(.*?)\*/g, '<em>$1</em>')
                        .replace(/### (.*?)\n/g, '<h4 class="font-bold mt-4 mb-2">$1</h4>')
                        .replace(/## (.*?)\n/g, '<h3 class="font-bold text-lg mt-6 mb-3">$1</h3>');
                    
                    document.getElementById('knowledgeLoading').classList.add('hidden');
                    document.getElementById('knowledgeResult').classList.remove('hidden');
                } else {
                    throw new Error(result.error || '获取知识失败');
                }
            } catch (error) {
                console.error('获取知识失败:', error);
                document.getElementById('knowledgeLoading').classList.add('hidden');
                document.getElementById('knowledgeInitial').classList.remove('hidden');
                alert(`获取知识失败: ${error.message}`);
            }
        });
    </script>
</body>
</html>
